<template>
	<a-modal :width="500" title="场景时长" :visible="visible" @ok="handleOk" @cancel="handleClose" centered>
		<div class="scene_time">
			<span>场景时长</span>
			<a-radio-group style="margin-left: 10px;" v-model:value="senceForm.seconds_type"
				name="radioGroup">
				<a-radio :value="0">自动</a-radio>
				<a-radio :value="1">固定</a-radio>
			</a-radio-group>
			<a-input v-if="senceForm.seconds_type == 1" style="width: 150px;" placeholder="请输入"
				addon-after="秒" v-model:value="senceForm.seconds" />
		</div>
		<template #footer>
			<a-button @click="handleClose">取消</a-button>
			<a-button @click="handleOk" type="primary" style="margin-left: 10px;">确定</a-button>
		</template>
	</a-modal>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import {
	} from "@ant-design/icons-vue";
	import {message} from 'ant-design-vue';
	export default defineComponent({
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			senceItem: {
				type: Object,
				default: ()=>{return {}}
			}
		},

		components: {
		},

		setup(props, context) {
			const state = reactive({
				senceForm: {
					seconds_type: 0,
					seconds: 5
				}
			});

			const handleOk = () => {
				if(state.senceForm.seconds_type == 1 && !state.senceForm?.seconds){
					message.warn('请先输入时长')
					return
				}
				context.emit('close', state.senceForm)
			}
			
			const handleClose = () => {
				context.emit('close')
			}

			watch(() => props.visible, val => {
				if(val && props.senceItem){
					if(!props.senceItem?.seconds_type){
						state.senceForm.seconds_type = 0
						state.senceForm.seconds = 5
					} else {
						state.senceForm.seconds = props.senceItem?.seconds
						state.senceForm.seconds_type = 1
					}
				}
			})
			
			return {
				...toRefs(state),
				handleOk,
				handleClose
			}
		},
	});
</script>

<style lang="less" scoped>
	.scene_time{
		display: flex;
		align-items: center;
	}
</style>